<template>
  <div>
    <div align="right">
      <el-radio-group v-model="view" @change="handleViewChange">
        <el-radio-button label="grid"
          ><i class="el-icon-s-grid"></i
        ></el-radio-button>
        <el-radio-button label="list"
          ><i class="el-icon-s-unfold"></i
        ></el-radio-button>
      </el-radio-group>
    </div>

    <div v-show="this.view === 'grid'">
      <el-button
        slot="reference"
        v-for="(type, index) in typeList"
        :key="index"
        @click="handleUpdateType(type, index)"
        class="vep-type"
      >
        {{ type }}
      </el-button>
      <el-button @click="handleAddType()" class="vep-type">
        <i class="el-icon-plus"></i>
      </el-button>
    </div>
    <div v-show="this.view === 'list'">
      <!-- 表布局 -->
      <el-table :data="typeList" style="width: 100%;">
        <el-table-column type="selection" width="25"></el-table-column>
        <el-table-column
          label="名称"
          align="center"
          prop="name"
        ></el-table-column>
        <el-table-column
          label="显示"
          align="center"
          prop="displayName"
        ></el-table-column>
        <el-table-column
          label="版本"
          align="center"
          prop="version"
        ></el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
            <el-button
              size="mini"
              type="primary"
              @click="handleCopy(scope.$index, scope.row)"
              >复制</el-button
            >
            <el-button
              size="mini"
              type="primary"
              @click="handleData(scope.$index, scope.row)"
              >数据管理</el-button
            >
          </template>
        </el-table-column>
        <div slot="append" align="center" style="margin: 5px">
          <el-button @click="handleAddType()" size="mini" type="primary"
            >添加</el-button
          >
        </div>
      </el-table>
    </div>
  </div>
</template>

<script>
import * as schema from '../../api/schema'

export default {
  data: function() {
    return {
      group: '',
      typeList: [],
      view: 'list'
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    handleViewChange() {
      console.log('view is: ' + this.view)
    },
    async loadData() {
      this.group = this.$route.params.group
        ? this.$route.params.group
        : this.$route.query.group
      if (!this.group) this.group = 'default'
      let result = await schema.FINDALL({ group: this.group })
      if (result.code === 0 && result.data) {
        this.typeList = result.data
      }
    },
    handleCopy(index, row) {
      let typeDef = JSON.parse(JSON.stringify(row))
      this.$router.push({
        name: 'DataDefine',
        params: { typeDef: typeDef }
      })
    },
    handleData(index, row) {
      let schemaName = row.name
      this.$router.push({
        name: 'DataTable',
        params: { schema : schemaName }
      })
    },
    async handleDelete(index, row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await schema.DELETE({ group: this.group, name: row.name })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.loadData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleEdit(index, row) {
      this.$router.push({
        name: 'DataDefine',
        params: { name: row.name, openModel: 'update' }
      })
    },
    handleAddType() {
      this.$router.push({
        name: 'DataDefine',
        params: { group: this.group }
      })
    },
    handleUpdateType(type) {
      this.$router.push({
        name: 'DataDefine',
        params: { group: this.group, name: type }
      })
    }
  },
  watch: {
    //通过watch来监听路由变化
    $route: function() {
      this.loadData()
    }
  }
}
</script>
<style scoped>
.vep-type {
  height: 100px;
  width: 100px;
}
</style>
